<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="三联一进"></uni-navbar></view>

		<view class="banner"><image class="image" :src="$imagePreview(detailInfo.logo)" mode="aspectFill"></image></view>

		<view class="form-box form-box-show">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="行业小组地址">{{ detailInfo.address }}</u-form-item>
				<u-form-item class="form-item" label="行业小组成员">{{ mapName }}</u-form-item>
				<u-form-item class="form-item" label="行业小组职责" labelPosition="top">
					<view class="input-text">{{ detailInfo.duty }}</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<view class="flex-box"><u-button class="form-btn" :plain="true" shape="circle" type="error" @click="navTo('/pagesA/lxHyxz/list')">联系情况</u-button></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			detailInfo: {},
			mapList: [],
			mapName: '',
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/minqingzhitong/ms-industry-group/get', {
				id: this.id
			}).then((res) => {
				this.detailInfo = res.data.msIndustryGroup;
				this.mapList = res.data.mapList;

				res.data.mapList.forEach((item) => {
					this.mapName += item.userName;
				});
			});
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.index-view {
	background-color: #fff;
}

.banner {
	position: relative;
	margin: 20rpx 30rpx;
	padding: 0;
	min-height: 300rpx;
	z-index: 10;

	.image {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
	}
}

.form-box {
	.form-item {
		@include mp-flex;
	}

	.input-text {
		width: 100%;
		text-align: left;
	}
}

.fiexd-btm {
	position: static;
	border-top: 10rpx solid #f5f7fa;
	padding: 30rpx;
}
</style>
